@charset 'utf-8';

@import 'reset';


html,body,.web{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html{
    cursor: pointer;
}


.web{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    img{
        width: 100%;
        height: 100%;
    }
}

.title{
    width: r(346px);
    height: r(41px);
    position: fixed;
    left: 50%;
    top: r(96px);
    margin-left: r(-173px);
    img{
        width: 100%;
        height: 100%;
    }
}


.scene{
    width: r(9999px);
    height: 69.4%;
    position: absolute;
    left: r(0px);
    top: r(0px);
    z-index: 10; 
    background: url(../img/game/paodao_bg2.png) repeat-x;
    background-size:  r(1000px);
    background-position: bottom;
    overflow: hidden;
    transition: all linear;
    .cloud{
        width: 100%;
        height: r(191px);
        margin-top: r(96px);
        background: url(../img/game/sky_bg1.png) 0 (-10px) repeat-x;
        background-size: r(550px);
        margin-left: r(640px);
    }
    .guidepost{
        width: r(451px);
        height: r(264px);
        position: absolute;
        img{
            width: 100%;
            height: auto;
        }
    }
    .sun{
        left: r(1500px);
        bottom: 0;
    }
    .mercury{
        left: r(2500px);
        bottom: 0;
    }
    .venus{
        left: r(3500px);
        bottom: 0;
    }
    .earth{
        left: r(4500px);
        bottom: 0;
    }
    .mars{
        left: r(5500px);
        bottom: 0;
    }
    .jupiter{
        left: r(6500px);
        bottom: 0;
    }
    .saturn{
        left: r(7500px);
        bottom: 0;
    }
    .uranus{
        left: r(8500px);
        bottom: 0;
    }
    .nepture{
        left: r(9500px);
        bottom: 0;
    }
}


.pillow{
   width: r(188px);
   height: r(95px);
   background: url(../img/game/zhentou1.png) 0 0 no-repeat;
   background-size: 100%;
   position: fixed;
   left: r(0px);
   top: r(-300px);
   z-index: 20; 
   .pillow-wrap{
       width: r(256px);
       height: r(200px); 
       background: url(../img/game/zhentou_bg.png) 0 0 no-repeat;
       background-size: cover;
       position: absolute;
       left: r(-10px);
       top: r(-50px);
   }
}


.enegry{
    width: r(510px);
    height: r(40px);
    position: fixed;
    left: 50%;
    bottom: 21.5%;
    margin-left: r(-255.5px);
    border-radius: r(20px);
    background: url(../img/game/power.png) no-repeat; 
    background-position: 0 0;
    background-size: cover;
    z-index: 10;
    .number{
        display: inline-block;
        width: r(90px);
        height: r(45px);
        position: absolute;
        left: r(-28px);
        top: r(-55px);
    }
   .power{
         width: r(511px);
         height: r(42px); 
         background-size: cover;
         position: absolute;
         left: r(-1px);
         top: 0;    
         vertical-align: middle;
         img{
             width: 100%;
             height: 100%;
         }
   }
}


.begin{
    width: r(640px);
    height: r(213px);
    position: absolute;
    bottom: 0;
    img{
        width: 100%;
    }
}


.ending{
    width: r(640px);
    height: r(213px);
    position: fixed;
    right: r(-640px);
    bottom: 30.6%;
    transition: all 1.5s ease-in-out;
    z-index: 10;
    img{
        width: 100%;
    }
}


.tips{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    p{
        width: r(375px);
        height: r(184px);
        margin: r(287px) auto 0 auto;
        img{
            width: 100%;
            height: 100%;
        }
    }  
}


.score{
    width: 100%;
    height: 100%;
    position: fixed;  
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 80;
    display: none;
    .inner{
        width: r(555px);
        height: r(348px);
        background: url(../img/game/result_bg.jpg) 0 0 no-repeat;
        background-size: cover;
        position: absolute;
        left: 50%;
        top: r(219px);
        margin-left: r(-277.5px);
        .top{
            width: r(483px);
            height: r(115px);
            font-size: 0;
            padding-top: r(119px);
            margin: 0 auto;
            canvas{
                width: r(241px);
                height: r(105px);
            }
        }
        .bottom{
            width: r(481px);
            height: r(108px);
            font-size: r(22px);
            text-align: center;
            color: white;
            margin: 0 auto;
        }
    }
    
    .btn{
        width: r(466px);
        height: r(65px);
        font-size: 0;
        position: absolute;
        bottom: r(266px);
        left: 50%;
        margin-left: r(-233px);
        a{
            width: r(227px);
            height: r(65px);
            display: inline-block;
            img{
                width: 100%;
            }
        }
        .play-again{
            float: left;
        }
        .lottery{
            float: right;
        }
    }
}


.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 60;
    img{
        width: 100%;
        height: 100%;
    }
    .progress{
        width: r(166px);
        height: r(36px);
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: r(-145px);
        margin-top: r(-18px);
    }
}


